{include file="common/pc/header" title="站点管理员登录" /}

{if condition="isset($siteConfig['loginBk'])"}
<style>
    body {
        background-image: url({$siteConfig.loginBk});
        background-size: cover;
        background-position: 50% 50%;
    }
</style>
{/if}
<style>
    body {
        height: 100vh;
        background-color: #f2f2f2;
    }

    input[name='code'] {
        width: calc(100% - 90px);
    }

    img.captcha {
        height: 36px;
        width: 90px;
        position: absolute;
        right: 0px;
        margin-top: -38px;
        border: solid 1px rgb(230, 230, 230);
        cursor: pointer;
    }

    .login-container {
    }

    .login-main {
        width: 435px;
        margin: 0 auto;
        box-sizing: border-box;
        height: 350px;
        margin-top: calc(50vh - 250px);
        background: rgba(255, 255, 255, 1);
        padding: 30px;
        border-radius: 5px;
        position: absolute;
        margin-left: calc(50vw - 220px);
    }

    .login-header {
        text-align: center;
    }

    .login-header p {
        font-weight: 300;
        color: #000;
        line-height: 40px;
    }

    .login-footer {
        text-align: center;
    }

    .login-main .layui-form-item .layui-input-inline {
        width: 266px;
        margin-right: 0px;
    }

    .login-main .layui-tab-title li {
        width: 50%;
        padding: 0px;
    }

    .login-main .layui-tab {
        margin: 0px;
    }

    .login-main .layui-tab .layui-tab-content {
        margin-top: 10px;
    }

    .login-main .layui-tab .layui-tab-item {
        height: 263px;
    }
</style>

<div class="login-container">
    <div class="login-main">
        <div class="login-header">
            <h2>{$siteConfig.siteName}</h2>
            <p>{$siteConfig.siteSlogan}</p>
        </div>
        <div class="login-body">
            <form class="layui-form layui-form-pane" action="" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="username" name="username" placeholder="请输入用户名" required
                               autocomplete="off"
                               class="layui-input" lay-verify="username"
                               lay-verType="tips"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" placeholder="请输入密码" required
                               autocomplete="off"
                               class="layui-input" lay-verify="password"
                               lay-verType="tips"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline">
                        <input type="code" name="code" placeholder="请输入验证码" required autocomplete="off"
                               class="layui-input" lay-verify="required"
                               lay-verType="tips"/>
                        <img class="captcha" src="{:captcha_src()}"
                             onclick="this.src='{:captcha_src()}?_='+new Date().getTime();"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-filter="login" lay-submit>登 录</button>
                </div>
            </form>
        </div>

        <div class="login-footer">
            Powered By © Ding.Zone
        </div>
    </div>
</div>

<script type="text/javascript">
    layui.use(['form', 'element'], function () {
        var form = layui.form;
        var element = layui.element;
        form.render();

        form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!value) {
                    return '请输入用户名';
                }
            },
            password: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!value) {
                    return '请输入密码';
                }
            }
        });

        form.on('submit(login)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            return true; //返回false阻止表单跳转
        });
    });
</script>

{include file="common/pc/footer"/}